<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float:left;">当前库存查询</span>
      </div>
      <div class="text item">
        <el-form inline :model="goods">
          <el-form-item label="商品类别:">
            <el-input size="mini" v-model="goods.typeName" disabled></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="text" icon="el-icon-folder-opened" @click="tostyle"></el-button>
          </el-form-item>
          <el-form-item label="商品编号或者名称:">
            <el-input size="mini" v-model="goods.mh"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="mini" icon="el-icon-search" round @click="mhcx">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-dialog title="提示" :visible.sync="dialogVisible">
      <el-tree :data="goodstyle" node-key="id" @current-change="handleNodeClick"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-card class="box-card">
      <div style="height:500px;" class="text item">
        <el-table
          ref="singleTable"
          :data="goodsList"
          highlight-current-row
          max-height="500px"
          @current-change="handleCurrentChange"
          style="width: 100%"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column property="code" label="商品编号" width="120"></el-table-column>
          <el-table-column property="name" label="商品名称" show-overflow-tooltip></el-table-column>
          <el-table-column property="model" label="型号" width="120"></el-table-column>
          <el-table-column property="unit" label="单位" width="120"></el-table-column>
          <el-table-column property="purchasingPrice" label="成本均价" width="120"></el-table-column>
          <el-table-column property="sellingPrice" label="销售单价" width="120"></el-table-column>
          <el-table-column property="inventoryQuantity" label="库存数量" width="120"></el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="goods.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="goods.total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goods: {},
      goodsList: [],
      dialogVisible: false,
      goodstyle: []
    };
  },
  mounted() {
    this.getGoodsList(1, 10);
  },
  methods: {
    tostyle() {
      this.dialogVisible = true;
      this.axios({
        method: "get",
        url: this.requestUrl + "inventory/inventory/tGoodstype/tree",
        params: {
          access_token: localStorage.getItem("access_token")
        }
      }).then(res => {
        console.log("获取的tree数据", res.data.obj);
        this.goodstyle = res.data.obj;
      });
    },
    handleNodeClick(data, node) {
      console.log("当前节点数据", data);
      this.goods.typeId = data.id;
      this.goods.typeName=data.label;
      if (data.id == "1") {
        this.goods.typeId = "";
      }
    },
    mhcx() {
      this.getGoodsList(this.goods.pageNum, this.goods.pageSize);
    },
    getGoodsList(pageNum, pageSize) {
      this.goods.pageNum = pageNum;
      this.goods.pageSize = pageSize;
      this.goods.access_token = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: this.requestUrl + "inventory/inventory/tGoods/list",
        params: this.goods
      }).then(res => {
        console.log("获取的商品信息", res.data.obj);
        this.goodsList = res.data.obj.list;
        this.goods.total = res.data.obj.total;
      });
    },
    handleSizeChange(val) {
      this.getGoodsList(this.goods.pageNum, val);
    },
    handleCurrentChange(val) {
      this.getGoodsList(val, this.goods.pageSize);
    }
  }
};
</script>
<style scoped>
.el-form-item {
  float: left;
}
</style>